<template>
  <el-container class="main-container">
    <el-aside class="sidebar">
      <side-menu @indexSelect="getByCategory" ref="sideMenu"></side-menu>
    </el-aside>
    <el-main class="main-content">
      <books
        @search="searchByKeyword"
        class="books-area"
        ref="booksArea"
      ></books>
    </el-main>
  </el-container>
</template>

<script>
import SideMenu from "./GoodSideMenu";
import Books from "./Goods";
export default {
  name: "BooksIndex",
  components: { SideMenu, Books },
  methods: {
    getByCategory() {
      this.$refs.booksArea.currentPage = 1;
      let cid = this.$refs.sideMenu.cid;
      let url = "/goods/search";
      let params = {
        page: 1,
        size: this.$refs.booksArea.pageSize
      };

      // 如果不是"全部"分类，添加分类ID
      if (cid !== "0") {
        params.categoryId = cid;
      }

      this.$axios
        .get(url, { params })
        .then(resp => {
          if (resp && resp.status === 200) {
            // 处理MyBatis-Plus分页格式：{ data: { records: [...], total: xxx } }
            const responseData = resp.data.data;
            if (responseData && responseData.records) {
              this.$refs.booksArea.books = responseData.records;
              // 更新总数用于分页
              this.$refs.booksArea.total = responseData.total || 0;
            } else {
              this.$refs.booksArea.books = [];
            }
          }
        })
        .catch(error => {
          console.error("获取分类商品失败:", error);
        });
    },
    searchByKeyword() {
      this.$refs.booksArea.currentPage = 1;
      let keyword = this.$refs.booksArea.keywords;
      let minPrice = this.$refs.booksArea.minPrice;
      let maxPrice = this.$refs.booksArea.maxPrice;
      let cid = this.$refs.sideMenu.cid;
      let url = "/goods/search";
      let params = {
        page: 1,
        size: this.$refs.booksArea.pageSize
      };

      // 添加搜索关键词
      if (keyword) {
        params.keyword = keyword;
      }

      // 添加价格筛选
      if (minPrice !== null && minPrice !== '') {
        params.minPrice = minPrice;
      }
      if (maxPrice !== null && maxPrice !== '') {
        params.maxPrice = maxPrice;
      }

      // 如果不是"全部"分类，添加分类ID
      if (cid !== "0") {
        params.categoryId = cid;
      }

      this.$axios
        .get(url, { params })
        .then(resp => {
          if (resp && resp.status === 200) {
            // 处理MyBatis-Plus分页格式：{ data: { records: [...], total: xxx } }
            const responseData = resp.data.data;
            if (responseData && responseData.records) {
              this.$refs.booksArea.books = responseData.records;
              // 更新总数用于分页
              this.$refs.booksArea.total = responseData.total || 0;
            } else {
              this.$refs.booksArea.books = [];
            }
          }
        })
        .catch(error => {
          console.error("搜索商品失败:", error);
        });
    }
  }
};
</script>

<style scoped>
.main-container {
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  min-height: 100vh;
  padding: 20px;
}

.books-area {
  width: auto;
}

/* 主内容区域样式 */
.main-content {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  margin-left: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 侧边栏样式 */
.sidebar {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  width: 180px !important;
  height: 625px;
  //flex-shrink: 0;
}
</style>
